Skip to content

[css-fonts-5][editorial] Add more meta text scale examples#14019

Open
davidsgrogan wants to merge 1 commit into
w3c:mainfrom
davidsgrogan:meta-examples
Open

[css-fonts-5][editorial] Add more meta text scale examples#14019
davidsgrogan wants to merge 1 commit into
w3c:mainfrom
davidsgrogan:meta-examples

Conversation

@davidsgrogan

Copy link
Copy Markdown
Member

Follow up to offline June 1 convo.

@davidsgrogan davidsgrogan changed the title [css-fonts-5] Add more meta text scale examples [css-fonts-5][editorial] Add more meta text scale examples Jun 5, 2026
@davidsgrogan davidsgrogan requested a review from fantasai June 5, 2026 23:10
@davidsgrogan

Copy link
Copy Markdown
Member Author

/cc @progers @JoshTumath

Comment thread css-fonts-5/Overview.bs
<meta name="text-scale" content="scale" />
<style>
.h1 {
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of adding a comment and a little content, then showing an example of the content at 1.x, 2x, and 3.5x? This will encourage others to test large scales.

<meta name="viewport" content="width=device-width">
<meta name="text-scale" content="scale">
<style>
h1 {
  /*
    Multiply the 2em baseline by a dampening factor (between 1.0 to 0.5) to
    ensure headers scale up, but without getting too large. Here are the
    resulting font sizes at various text scale factors:
            h1      body
      1x    32px    16px
      1.5x  40px    24px
      2x    48px    32px
      3x    64px    48px
      3.5x  72px    56px
  */
  --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
  font-size: calc(2em * var(--dampen-factor));
}
</style>
<h1>Header</h1>
This is some body text. The header grows slower than the body text.
Image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that seems good, as long as @fantasai thinks it's appropriate level of detail for the spec. (We could put it in MDN or some other article/documentation.)

Also, note that you can see this PR at https://davidsgrogan.github.io/css-fonts-5/Overview.html#scale-keyword

@JoshTumath JoshTumath left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These examples are really helpful.

Comment thread css-fonts-5/Overview.bs

<div class="example" id="ex-scaled-page">
If authors don't alter the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale
Assuming a page hasn't altered the '':root'' font size, content sized with ''rem'' units will be relative to the preferred text scale

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be better to say, "Assuming a page hasn't altered the :root font size with an absolute length unit like px"

Comment thread css-fonts-5/Overview.bs
<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level.
The author will then be able to use ''rem'' and ''em'' throughout the page to honor the user's font preferences.

Note:

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bikeshed has put this paragraph in a separate note box, but this seems like a continuation of the previous one. Do they need to be in the same note box?

Comment thread css-fonts-5/Overview.bs
</div>

<div class="example" id="ex-non-linear">
Header text starts larger than body text, so pages should probably grow headers at a slower rate.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this intro needs more context. How about this:

If an element such as a heading already has large text, it is likely already large enough for a user who needs a high text scale to read. If the large text scales at the same rate as the body text, it could become too large to comfortably fit in the user's viewport.

Therefore, authors should consider using a dampening factor to reduce the rate that large text scales.

Comment thread css-fonts-5/Overview.bs
&lt;meta name="text-scale" content="scale" />
&lt;style>
.h1 {
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be good to use parentheses around the division so that people don't get confused by BIDMAS/PEMDAS. (Because I did. 😅 I was wondering for ages why it's not just 1 / env(preferred-text-scale).)

Suggested change
--dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
--dampen-factor: calc(0.5 + (0.5 / env(preferred-text-scale)));

Comment thread css-fonts-5/Overview.bs
Note:
Authors are expected to use
<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect a combination of the user's font preferences, whether those are specified at the OS level or the UA level. The author will then be able to use ''rem'' throughout the page to honor the user's font preferences.
<code>&lt;meta name="text-scale" content="scale"&gt;</code> in stylesheets so that the ''font-size/medium'' font size will reflect the user's font preferences, whether those are specified at the OS level or the UA level.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this needs stronger wording so that authors know 'you must only use this if you have tested your website with scaled text'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants